<template>
	<view>
		<view class="topbox clear">
			<view class="top">
				<view class="indexPage" :style="{ paddingTop: titleTop + 'px' }">
					<view class="main-title" :style="{ height: statusBarHeight + 'px' }">
						<image @click="toBack" src="https://daiyue.gzzhenyi.net/static/products/back.png" mode="widthFix">
						</image>
						<image class="search" @click="navTo(`/long/search/search`)"
							src="https://daiyue.gzzhenyi.net/static/products/search.png" mode="widthFix">
						</image>
					</view>
				</view>
			</view>
			<!-- 顶部轮播图 -->
			<swiper class="swiper" :style="{height: swiperHeight + 'px'}" @change="changeSwiper" :indicator-dots="true"
				indicator-color="#ffffff60" indicator-active-color="#ffffff" :autoplay="autoPlay" :interval="5000"
				:duration="600">
				<swiper-item v-if="item.main_type == '5'" @click="clickVideo">
					<!-- 已购买视频 -->
					<video id="wrap0" class="video" :src="baseUrl + item.video_url" @error="videoErrorCallback" controls
						:vslide-gesture-in-fullscreen="false" @play="playVideo" @ended="endVideo" v-if="item.video_buy"></video>
					<!-- 未购买视频 -->
					<video id="wrap0" class="video" :src="baseUrl + item.prev_video_url" @error="videoErrorCallback" controls
						:show-play-btn="true" :show-progress="false" :vslide-gesture-in-fullscreen="false" autoplay muted
						show-mute-btn @play="playVideo" @ended="endVideo" enable-play-gesture v-else></video>
				</swiper-item>
				<!-- 产品相册 -->
				<swiper-item v-for="(item,index) in item.images">
					<image :id="calcId(index)" class="topbgimg" :src="baseUrl + item" mode="widthFix"></image>
				</swiper-item>
			</swiper>

			<view class="box clear">
				<view class="zhuanye" v-if="pregnant" style="background-color:#FF6200 ;">
					<image src="https://daiyue.gzzhenyi.net/static/products/fire.png" mode="widthFix"></image>
					<view class="t1">平台热销爆款</view>
					<view class="t2">质量保障</view>
				</view>
				<view class="zhuanye" v-else>
					<image src="https://daiyue.gzzhenyi.net/static/products/safe.png" mode="widthFix"></image>
					<view class="t1">专业安全有保障</view>
					<view class="t2">质量保障</view>
				</view>
				<view class="titbox">
					<view class="jiage">
						<view v-if="item.vip_price > 0">会员价: <text class="vipPrice"> ¥{{ item.vip_price || 0 }}</text>
						</view>
						<text class="price" v-if="item.market_price > 0"
							:style="item.vip_price > 0 ? '' : 'font-size: 30rpx; color: #FF6200;'">¥{{
								item.market_price || 0
							}}</text>
						<text class="price" style="font-size: 30rpx; color: #FF6200;" v-else>验证后可查看产品价格</text>
						<text class="yishou">已售{{ item.sales || 0 }}份</text>
					</view>
					<view class="titlebox">
						<text class="title">{{ item.title }}</text>
						<image @click="clickShow" src="https://daiyue.gzzhenyi.net/static/products/share.png" mode="widthFix">
						</image>
						<text @click="clickShow" class="share">分享</text>
					</view>
					<view class="note">{{ item.description }}</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="service">
				<view class="item" @click="onClickShow('yxshow')">
					<text>{{ selected.sn ? '已选' : "请选择" }}</text>
					<view class="tbox">
						<text>{{ selected.sn }}</text>
					</view>
					<van-icon name="arrow" color="#999999" />
				</view>
				<view class="item" @click="onClickShow('fwshow')" v-if="item.shop && item.shop.service_ids.length > 0">
					<text>服务</text>
					<view class="tbox">
						<view v-for="(iten, index) in item.shop.service_ids.slice(0, 2)" :key="index">
							<van-icon name="passed" />
							<text>{{ iten.name }}</text>
						</view>

					</view>
					<van-icon name="arrow" color="#999999" />
				</view>
				<view class="item">
					<text>门店</text>
					<text class="tbox" v-if="shopList.length > 0"
						@click="navTo(`/long/stores/stores?id=${item.shop_id}`)">{{ shopList[0].store_name }}
						<text class="km">距您{{ shopList[0].distance.distance }}km</text>
					</text>
					<text class="tbox" v-else>附近线下无门店</text>
					<van-icon name="arrow" color="#999999" v-if="shopList.length > 0" />
				</view>
				<view class="item" @click="onClickShow('csshow')" v-if="item.spu && item.spu.length > 0">
					<text>参数</text>
					<text class="tbox">型号/颜色/货号</text>
					<van-icon name="arrow" color="#999999" />
				</view>
			</view>
			<view class="evaluate"
				@click="navTo(`/long/evaluate/evaluate?id=${item.id}&longitude=${longitude}&latitude=${latitude}`)">
				<view class="tit">
					<text>评价{{ evaluateList.length || 0 }}</text>
					<van-icon name="arrow" color="#999999" />
				</view>
				<view class="eitembox">
					<view class="item" v-for="item in evaluateList.slice(0, 2)">
						<image :src="baseUrl + item.user.avatar" mode="widthFix"></image>
						<view class="eright">
							<view class="name">
								<text>{{ item.anonymous == 1 ? '匿名用户' : item.user.nickname }}</text>
								<view class="yixuan">
									<text>已选：</text>
									<text>{{ item.suk }}</text>
								</view>
							</view>
							<view class="etext">{{ item.content }}</view>
						</view>
					</view>
					<view class="eitembox-list" v-if="evaluateList.length == 0">暫无评论</view>
				</view>
			</view>
			<view class="merchant" v-if="item.main_type == 3">
				<image class="dlogo" :src="baseUrl + item.shop.avatar"></image>
				<view class="dxxbox">
					<view class="dname">{{ item.shop.shopname }}</view>
					<view class="pingf">
						<van-rate size="10" gutter="1" :value="item.shop.score_service || 0" color="#FF6200" @change="onChange" />
						<text class="feng">{{ item.shop.score_service || 0 }} 分</text>
						<text>{{ item.like || 0 }}粉丝</text>
					</view>
				</view>
				<view class="jind" @click="navTo(`/pages/storeDetails/sotreDetails/sotreDetails?id=${item.shop_id}`)">
					<van-icon name="wap-home-o" />
					<text>进店</text>
				</view>
				<view class="guanz" @click="follow(item.shop_id)">
					<van-icon name="plus" v-if="item.shop.like == 0" />
					<text>{{ item.shop.like == 1 ? '已关注' : '关注' }}</text>
				</view>
			</view>
			<view class="recommend">
				<view class="tit" @click="navTo(`/pages/storeDetails/sotreDetails/sotreDetails?id=${item.shop_id}`)">
					<text v-if="item.main_type == 3">店家推荐</text>
					<text v-else>平台推荐</text>
					<van-icon name="arrow" color="#999999" />
				</view>
				<view class="ritembox">
					<view class="item" v-for="(ites, index) in recommendList.slice(0, 3)" :key="index"
						@tap="navTo(`/long/productDetail/productDetail?id=${ites.id}&pregnant=${pregnant}`)">
						<image :src="baseUrl + ites.image" mode="widthFix"></image>
						<view class="textbox">
							<text class="title">{{ ites.title }}</text>
							<span v-if="ites.vip_price > 0">
								<text class="vipPrice" v-if="item.main_type == 3">{{ ites.vip_price }}</text>
								<text class="vipPrice" v-else>会员价:{{ ites.vip_price }}</text>
							</span>
							<text class="vipPrice">验证后可查看</text>
							<view class="tbottom">
								<text class="price" v-if="ites.market_price > 0">{{ ites.market_price }}</text>
								<view class="yishou">已售{{ ites.sales }}份</view>
							</view>
						</view>
					</view>
					<view class="eitembox-list" v-if="recommendList.length == 0">暫无商品</view>
				</view>
			</view>

			<view class="details">
				<view class="tit">详情</view>
				<view class="dashed"></view>
				<view class="detailsbox" v-html="replaceWhite(item.content)">
				</view>
			</view>
		</view>
		<van-goods-action>
			<van-goods-action-icon icon="shop-o" text="店铺"
				@click="navTo(`/pages/storeDetails/sotreDetails/sotreDetails?id=${item.shop_id}&main_type=${main_type}`)" />
			<button class="contact-button" type="default" plain="true" open-type="contact">
				<van-goods-action-icon icon="chat-o" text="客服" />
			</button>
			<van-goods-action-icon icon="star" color="#E9B422" text="收藏" @click="onClickCollect()" v-if="collectShow" />
			<van-goods-action-icon icon="star-o" text="收藏" @click="onClickCollect()" v-else />
			<block v-if="item.video_buy">
				<van-goods-action-button text="立即观看" @click="clickVideo" />
			</block>
			<block v-else>
				<van-goods-action-button text="免费试看" type="warning" v-if="item.main_type == '5'" @click="clickVideo" />
				<van-goods-action-button text="加入购物车" type="warning" v-else @click="onClickShow('yxshow')" />
				<van-goods-action-button text="立即购买" @click="onClickShow('yxshow')" />
			</block>
		</van-goods-action>

		<!-- 服务 -->
		<serveShow title="服务" :serviceList="item.shop.service_ids" :show="fwshow" @fwclose="onClickClose('fwshow')" />
		<!-- 商品参数 -->
		<serveShow title="商品参数" :show="csshow" :itemSpu="item.spu" @fwclose="onClickClose('csshow')" />
		<!-- // 分享面板内容 -->
		<share ref="share" />
		<!-- 选购 -->
		<shopping :show="yxshow" :isVideo="item.main_type == '5' ? true : false" :item="item" :shopList="shopList"
			@steppet="onStepper" @onCilks="onClickClose('yxshow')" />
	</view>
</template>

<script>
	import share from "@/components/productDetail/share.vue"
	import serveShow from "@/components/productDetail/serveShow.vue";
	import shopping from "@/components/productDetail/shopping.vue"
	import {
		getGoodsDetail,
		collectGoods,
		getStoreList,
		shareGoods,
		getGoodsCommentList,
		getRecommendList,
		followShop
	} from "@/api/api.js"
	import {
		replaceWhite
	} from "@/util/util.js"
	import baseUrl from "@/api/baseUrl";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			share,
			serveShow,
			shopping
		},
		data() {
			return {
				baseUrl,
				evaluateList: [],
				recommendList: [],
				// 已选弹出层
				yxshow: false,
				// 服务弹出层
				fwshow: false,
				// 参数弹出层
				csshow: false,
				// 试看弹出层
				freeShow: false,
				item: {},
				selected: {},
				id: '',
				collectShow: false,
				longitude: '',
				latitude: '',
				shopList: [],
				safeAreaInsets: {},
				titleTop: 0,
				statusBarHeight: 0,
				// 视频播放器
				videoContext: '',
				// 轮播图高度
				swiperHeight: 150,
				// 当前索引
				currIndex: 0,
				// 轮播图自动切换
				autoPlay: true,

			};
		},
		computed: {
			calcId() {
				return (index) => {
					return 'wrap' + (this.item.main_type == '5' ? index + 1 : index);
				}
			}
		},
		onLoad(options) {
			console.log(options)
			if(options.show){
				this.yxshow = true
			}
			if (options.scene) {
				let scene = decodeURIComponent(options.scene)
				let option = JSON.parse(scene)
				this.id = option.id
				this.pregnant = option.pregnant
			} else {
				this.pregnant = options.pregnant ? true : false;
				this.id = options.id
			}

			this.details();
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					this.longitude = res.longitude
					this.latitude = res.latitude
				},
				fail: function(err) {
					console.log(err)
				}
			});

		},
		onReady() {
			let that = this;
			// 获取胶囊按钮位置信息
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const {
				top,
				height
			} = menuButtonInfo;
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			
			// 创建视频实例指向video
			this.videoContext = uni.createVideoContext('wrap0');

			// 计算标题需要偏移的位置
			const titleTop = top + (height - statusBarHeight) / 2;
			this.titleTop = titleTop; //设置标题顶部距离
			this.statusBarHeight = statusBarHeight; //设置状态栏高度
		},
		methods: {
			replaceWhite,
			...mapMutations('commodity', ['saveCommodity']),
			/* 切换 swiper 滑块 */
			changeSwiper(e) {
				this.autoPlay = true;
				this.currIndex = e.detail.current;
				this.$nextTick(() => {
					this.setSwiperHeight(); // 动态设置 swiper 的高度
				});
			},
			/* 动态设置 swiper 的高度 */
			setSwiperHeight() {
				const element = "#wrap" + this.currIndex;
				const query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec(res => {
					// console.log('query', res)
					if (res && res[0]) this.swiperHeight = res[0].height;
				});
			},
			// 视频全屏
			clickVideo() {
				console.log('clickVideo')
				this.videoContext.requestFullScreen();
			},
			// 视频开始播放
			playVideo() {
				this.autoPlay = false;
			},
			// 视频播放结束
			endVideo() {
				this.autoPlay = true;
			},
			// 视频加载错误回调
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			details() {
				getGoodsDetail({
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						res.data.images = res.data.images.split(',')
						res.data.spu.forEach(spu => spu.item = spu.item.split(','));
						// res.data.sku.forEach(sku => sku.difference = sku.difference.split(','));
						this.item = res.data
						this.showList()
						this.store()
						this.commentList()
						this.saveCommodity(res.data)

						console.log('details', this.item)

						/* ***** 假设已购买 ***** */
						/* this.item = {
							...res.data,
							video_buy: true
						}; */
						
						// 初始化swiper高度
						this.$nextTick(() => {
							setTimeout(() => {
								this.setSwiperHeight(); // 动态设置 swiper 的高度
							}, 500)
						});
						
						this.videoContext = uni.createVideoContext('wrap0');
					}
				})
			},
			// 服务
			// service() {
			// 	getShopService({ id: this.item.shop_id }).then(res => {
			// 		if (res.code == 1) {
			// 			// this.item.service = res.data
			// 		}
			// 	})
			// },
			// 店铺
			store() {
				let data = {
					shop_id: this.item.shop_id,
					longitude: this.longitude || '113.38',
					latitude: this.latitude || '22.94'
				}
				getStoreList(data).then(res => {
					if (res.code == 1) {
						this.shopList = res.data
					}
				})
			},
			follow(id) {
				followShop({
					shop_id: id
				}).then(res => {
					if (res.code == 1) {
						this.details()
					}
				})
			},
			//推荐
			showList() {
				getRecommendList({
					shop_id: this.item.shop_id
				}).then(res => {
					if (res.code == 1) {
						this.recommendList = res.data.list
					}
				})

			},
			// 评价
			commentList() {
				getGoodsCommentList({
					goods_id: this.item.id
				}).then(res => {
					if (res.code == 1) {
						this.evaluateList = res.data.comment.data
					}
				})
			},
			// 链接跳转
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			// 分享
			clickShow() {
				let {
					item,
					id,
					pregnant
				} = this
				let option = {
					id,
					pregnant
				}
				let data = {
					'goods_id': id,
					'page': 'long/productDetail/productDetail',
					'scene': encodeURIComponent(JSON.stringify(option)),
					// "scene":"123"
				}
				shareGoods(data).then(res => {
					if (res.code == 1) {
						this.$refs.share.onShows(this.item, res.data)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

				})
			},
			// 打开已选弹出框
			onClickShow(name) {
				this.$set(this, name, true)
			},
			// 关闭已选弹出框
			onClickClose(name) {
				this.$set(this, name, false)
			},
			toBack() {
				uni.navigateBack()
			},
			// 己选择 
			onStepper(e) {
				this.selected = e
			},
			// 收藏
			onClickCollect() {
				collectGoods({
					goods_id: this.item.id
				}).then(res => {
					uni.showToast({
						title: res.code == 1 ? (res.data ? '收藏成功' : '取消收藏') : res.msg,
						icon: res.code == 1 ? 'success' : 'none'
					})
					if (res.code == 1) {
						this.collectShow = res.data
					}
				})
			},
		}
	}
</script>
<style lang="less">
	::v-deep.van-share-sheet__options {
		justify-content: space-evenly;
	}
</style>
<style lang="scss">
	page {
		background: #eeeeee;
	}

	.swiper {
		height: auto;

		// 视频组件
		#wrap0.video {
			width: 100%;
			height: 1000rpx;
		}
	}

	.top {
		position: fixed;
		top: 0;
		background-size: 100%;
		background-repeat: no-repeat;
		box-sizing: border-box;
		width: 100%;
		z-index: 99;
	}

	.main-title {
		/*必要 对齐胶囊按钮*/
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;

		image {
			width: 55rpx;
			height: 55rpx;
			// margin-top: 4.2%;
		}

		.search {
			position: absolute;
			right: 30%;
		}
	}

	.clear:after {
		display: block;
		content: " ";
		clear: both;
		height: 0;
	}

	.topbox {
		.topbgimg {
			width: 100%;
		}

		.box {
			margin-top: -13rpx;
			position: relative;
			width: 100%;

			.zhuanye {
				border-radius: 20rpx;
				background: #359BEF;
				display: flex;
				width: 100%;
				height: 122rpx;
				padding: 15rpx 20rpx;
				box-sizing: border-box;
				column-gap: 10rpx;
				margin-top: -8px;

				image {
					width: 32rpx;
					// height: 40rpx;
				}

				.t1 {
					font-size: 28rpx;
					color: #FFFFFF;
					flex: 1;
				}

				.t2 {
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.titbox {
				border-radius: 15rpx;
				background: #FFFFFF;
				padding: 30rpx;
				padding: 15rpx 20rpx;
				display: flex;
				flex-direction: column;
				row-gap: 20rpx;
				width: 100%;
				box-sizing: border-box;
				margin-top: -62rpx;

				.jiage {
					color: #FF6200;
					font-size: 26rpx;
					display: flex;
					align-items: center;
					column-gap: 20rpx;

					.vipPrice {
						font-size: 32rpx;
					}

					.price {
						color: #A2A2A2;
						font-size: 24rpx;
						flex: 1;
					}

					.yishou {
						font-size: 22rpx;
						color: #5C5C5C;
					}
				}

				.titlebox {
					margin-top: 10rpx;
					display: flex;

					.title {
						font-size: 30rpx;
						color: #333333;
						flex: 1;
					}

					image {
						width: 28rpx;
						height: 28rpx;
					}

					.share {
						color: #333333;
						font-size: 22rpx;
						margin-left: 10rpx;
					}
				}

				.note {
					font-size: 24rpx;
					color: #A2A2A2;
				}
			}
		}
	}

	.eitembox-list {
		font-size: 28rpx;
		color: #999;
		text-align: center;
	}

	.contact-button {
		margin: 0;
		padding: 0;
		border: 0 !important;
		border-radius: 0;
	}

	.content {
		position: relative;
		top: 20%;
		padding-bottom: 180rpx;

		.service {
			margin-top: 20rpx;
			border-radius: 15rpx;
			background: #FFFFFF;

			.item {
				padding: 30rpx;
				display: flex;
				font-size: 30rpx;
				color: #333333;
				border-bottom: 1px solid #F0F0F0;
				column-gap: 20rpx;

				.km {
					margin-left: 10upx;
					font-size: 24upx;
					color: #333333;
				}

				.tbox {
					display: flex;
					flex: 1;
					column-gap: 16rpx;
					overflow: hidden;

					van-icon {
						margin-right: 10rpx;
					}
				}
			}
		}

		.evaluate {
			padding: 30rpx;
			border-radius: 15rpx;
			background: #FFFFFF;
			margin-top: 20rpx;

			.tit {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				color: #333333;
			}

			.eitembox {
				margin-top: 40rpx;
				display: flex;
				flex-direction: column;
				row-gap: 10rpx;



				.item {
					padding-bottom: 30rpx;
					display: flex;
					column-gap: 10rpx;

					image {
						width: 28rpx;
						border-radius: 50%;
						margin-top: 3rpx;
					}

					.eright {
						flex: 1;
						display: flex;
						flex-direction: column;
						row-gap: 20rpx;

						.name {
							display: flex;
							column-gap: 20rpx;
							font-size: 24rpx;
							color: #5C5C5C;
						}

						.etext {
							font-size: 22rpx;
							color: #333333;
							display: -webkit-box;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							line-height: 1.5em;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}

		.recommend {
			padding: 20rpx 30rpx 30rpx 40rpx;
			box-shadow: 0px 2px 8px 0px rgba(205, 205, 205, 0.5);
			border-radius: 15rpx;
			background: #FFFFFF;
			margin-top: 20rpx;

			.tit {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				color: #212121;
			}

			.ritembox {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				column-gap: 12rpx;
				margin-top: 20rpx;

				.item {
					display: flex;
					flex-direction: column;
					width: 32%;
					box-sizing: border-box;
					background-color: #fff;
					border-radius: 20rpx;

					image {
						width: 196rpx;
						border-radius: 8rpx;
						box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.06);
					}

					.textbox {
						padding: 15rpx 20rpx;
						display: flex;
						flex-direction: column;
						row-gap: 10rpx;

						.title {
							font-size: 26rpx;
							color: #333333;
						}

						.vipPrice {
							color: #FF6200;
							font-size: 22rpx;
							margin-right: 10rpx;
						}

						.tbottom {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.price {
								color: #333333;
								font-size: 22rpx;
							}

							.yishou {
								font-size: 20rpx;
								color: #CCCCCC;
							}
						}
					}
				}
			}
		}

		.merchant {
			display: flex;
			align-items: center;
			column-gap: 10rpx;
			margin-top: 20rpx;
			box-shadow: 0px 2px 8px 0px rgba(205, 205, 205, 0.5);
			border-radius: 15rpx;
			background: #FFFFFF;
			padding: 30rpx;

			.dlogo {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			.dxxbox {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;

				.dname {
					font-size: 30rpx;
					color: #333333;
				}

				.pingf {
					display: flex;
					column-gap: 10rpx;
					font-size: 20rpx;
					color: #5C5C5C;

					.feng {
						padding-right: 15rpx;
						border-right: 1px solid #5C5C5C;
					}
				}
			}

			.jind {
				box-sizing: border-box;
				border: 1px solid #FF6200;
				width: 100rpx;
				color: #FF6200;
				border-radius: 25.5rpx;
				font-size: 22rpx;
				height: 46rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				column-gap: 5rpx;
			}

			.guanz {
				box-sizing: border-box;
				border: 1px solid #FF6200;
				width: 100rpx;
				background: #FF6200;
				border-radius: 25.5rpx;
				color: #fff;
				font-size: 22rpx;
				height: 46rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				column-gap: 5rpx;
			}
		}

		.details {
			margin-top: 20rpx;
			box-shadow: 0px 2px 8px 0px rgba(205, 205, 205, 0.5);
			border-radius: 15rpx;
			background: #FFFFFF;

			.tit {
				font-size: 30rpx;
				color: #333333;
				padding: 30rpx;
				border-bottom: 3rpx dashed #F0F0F0;
			}

			.detailsbox {
				text-align: center;
				margin: auto;
				box-sizing: border-box;

				.title {
					font-size: 52rpx;
					color: #333333;
					margin-top: 58rpx;
				}
			}
		}
	}


	.ysfl {
		padding-left: 20rpx;

		.tit {
			font-size: 30rpx;
			color: #333333;
		}

		.item {
			display: flex;
			margin: 20rpx 0;

			.limg {
				width: 80rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				border-radius: 5rpx;
				opacity: 1;
				background: #FFFFFF;
				box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.06);

				image {
					width: 50%;
				}
			}

			.rtext {
				display: flex;
				align-items: center;
				column-gap: 40rpx;
				border-radius: 5rpx;
				background: #FF6200;
				color: #fff;
				font-size: 26rpx;
				padding: 10rpx;
			}

			.active {
				display: flex;
				align-items: center;
				column-gap: 40rpx;
				border-radius: 5rpx;
				font-size: 26rpx;
				padding: 10rpx;
				color: #333333;
				background: #F4F2F2;

				.price {
					color: #FF6200;
				}
			}
		}
	}

	.mend {
		margin: 30rpx;

		.tit {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #3D3D3D;
		}

		.juli {
			border-radius: 8rpx;
			background: #FFEFDF;
			display: flex;
			align-items: center;
			padding: 20rpx;
			column-gap: 10rpx;
			margin: 30rpx 0;

			.jltxt {
				border-radius: 4rpx;
				box-sizing: border-box;
				border: 0.8rpx solid #FF6200;
				font-size: 18rpx;
				color: #FF6200;
			}

			.dianm {
				font-size: 22rpx;
				color: #3D3D3D;
			}

			.didtb {
				flex: 1;
			}
		}

		.chanpin {
			display: flex;
			column-gap: 20rpx;

			image {
				width: 127rpx;
				height: 127rpx;
			}

			.tright {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 10rpx 0;

				.tit {
					font-size: 24rpx;
					color: #3D3D3D;
				}

				.distance {
					display: flex;
					justify-content: space-between;
					font-size: 22rpx;
					color: #9C9C9C;
				}
			}
		}
	}

	.btnbox {
		padding: 30rpx;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;

		.adgwc {
			border-radius: 35rpx 0 0 35rpx;
			background: #FF7E00;
			width: 50%;
			height: 70rpx;
			line-height: 70rpx;
			box-sizing: border-box;
			color: #fff;
			text-align: center;
		}

		.goumai {
			border-radius: 0 35rpx 35rpx 0;
			background: #FF6200;
			width: 50%;
			height: 70rpx;
			line-height: 70rpx;
			box-sizing: border-box;
			color: #fff;
			text-align: center;

			&.isVideo {
				width: 100%;
				border-radius: 35rpx;
			}
		}
	}

	.sharebox {
		position: fixed;
		top: 42%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
		width: 600rpx;
		border-radius: 20rpx;
		background-color: #fff;

		image {
			width: 100%;
			border-radius: 20rpx;
		}

		.sbottom {
			padding: 20rpx;

			.jiage {
				color: #FF6200;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				column-gap: 20rpx;
				margin: 10rpx 0;

				.vipPrice {
					font-size: 32rpx;
				}

				.price {
					color: #A2A2A2;
					font-size: 24rpx;
					flex: 1;
				}

				.yishou {
					font-size: 22rpx;
					color: #5C5C5C;
				}
			}

			.title {
				font-size: 30rpx;
				color: #333333;
				margin-bottom: 40rpx;
			}

			.ewm {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				row-gap: 10rpx;

				image {
					width: 102rpx;
					height: 102rpx;
				}
			}
		}
	}




	.know {
		padding: 60rpx 30rpx;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
	}
</style>